<template>
  <ul class="films-list">
    <li
      v-for="item in list"
      :key="item.id"
      class="item"
      @click="goToDetail(item.id)"
    >
      <img :src="getImages(item.pic)" alt="" class="cover" />
      <div>
        <h1 class="title">{{ item.title }}</h1>
        <p class="raiting">评分{{ item.raiting }}</p>
        <p class="labels">
         
          
        </p>
      </div>
    </li>
  </ul>
</template>
<script setup>
import { toRefs, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useMovieStore } from '../stores/movie'
onBeforeMount(() => {
  getFilmData()
})
const router = useRouter()
const { list } = toRefs(useMovieStore())
const { getFilmData } = useMovieStore()
// 解决403图片缓存问题
function getImages(_url) {
  if (_url !== undefined) {
    let _u = _url.substring(7)
    return 'https://images.weserv.nl/?url=' + _u
  }
}
function goToDetail(id) {
  router.push(`/film/detail?id=${id}`)
}
</script>

<style scoped>
.films-list {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}
.films-list .item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 15px 30px;
  border-bottom: 1px solid #000;
}
.films-list .item .cover {
  width: 100px;
  height: 150px;
}
</style>
